<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>厕所详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/swiper.min.css">
		<link rel="stylesheet" href="../css/info.css">
	</head>

	<body>
		<div id="app" v-cloak>
			<header id="header" class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">厕所详情</h1>
			</header>
			<div class="mui-content">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in bannerlist">
							<img :src="item">
						</div>
					</div>
				</div>
				
				<div class="content_box">
					<div class="text_title">
						<h1 @click="F5_onload">{{getData.toiletName}}</h1>
						<div class="star_top">
							<span>星级：</span>
							<ul>
								<li v-for="count in all_star"><img src="../images/star.png" alt="星标"><i>{{getData.toiletPraise}}</i></li>
							</ul>
						</div>
					</div>
					<div class="title_info">
						<ul>
							<li><label>开放时间：</label><span>{{getData.toiletOpen}}</span></li>
							<li><label>地理位置：</label><span>{{getData.toiletAddress}}</span></li>
							<li><label>管理单位：</label><span>{{getData.toiletUnit}}</span></li>
						</ul>
					</div>

					<div class="facility">
						<h2><img src="../images/tit_cure.png" alt="设施配备"><span>设施配备</span></h2>
						<ul>
							<li>
								<div class="img_box">
									<img src="../images/man_total_true.png" alt="男士卫生间" v-if="img_1">
									<img src="../images/man_total.png" alt="男士卫生间" v-else>
								</div>

								<p>男士卫生间</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/momen_t_tue.png" alt="女士卫生间" v-if="img_2">
									<img src="../images/momen_t.png" alt="女士卫生间" v-else>
								</div>
								<p>女士卫生间</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/three_t_ture.png" alt="第三卫生间" v-if="img_3">
									<img src="../images/three_t.png" alt="第三卫生间" v-else>
								</div>
								<p>第三卫生间</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/mands_t_ture.png" alt="母婴室" v-if="img_4">
									<img src="../images/mands_t.png" alt="母婴室" v-else>
								</div>
								<p>母婴室</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/nmshop_true.png" alt="无人售货机" v-if="img_5">
									<img src="../images/nmshop.png" alt="无人售货机" v-else>
								</div>
								<p>无人售货机</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/tel.png" alt="手机充电台" v-if="img_6">
									<img src="../images/tel_mr.png" alt="手机充电台" v-else>
								</div>
								<p>手机充电台</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/wifi_true.png" alt="WIFI覆盖" v-if="img_7">
									<img src="../images/wifi.png" alt="WIFI覆盖" v-else>
								</div>
								<p>WIFI覆盖</p>
							</li>
							<li>
								<div class="img_box">
									<img src="../images/auto_page_true.png" alt="自动取纸机" v-if="img_8">
									<img src="../images/auto_page.png" alt="自动取纸机" v-else>
								</div>
								<p>自动取纸机</p>
							</li>
						</ul>
					</div>

					<div class="show_hiden" v-if="show_hiden">
						<div class="cs_total">
							<h2 class="pub_h2">男士卫生间 </h2>
							<dl>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_1gz.png" alt="光照">
										</div>
										<h3>{{gz_1}}</h3>
										<p>光照指数</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_2yjhf.png" alt="有机挥发物">
										</div>
										<h3>{{yj_1}}</h3>
										<p>有机挥发物</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_3wd.png" alt="温度">
										</div>
										<h3>{{sd_1}}</h3>
										<p>温度</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_4sd.png" alt="湿度">
										</div>
										<h3>{{wd_1}}</h3>
										<p>湿度</p>
									</div>
								</dd>
							</dl>
							<h2 class="pub_h2">女士卫生间</h2>
							<dl>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_1gz.png" alt="光照">
										</div>
										<h3>{{gz_2}}</h3>
										<p>光照指数</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_2yjhf.png" alt="有机挥发物">
										</div>
										<h3>{{yj_2}}</h3>
										<p>有机挥发物</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_3wd.png" alt="温度">
										</div>
										<h3>{{sd_2}}</h3>
										<p>温度</p>
									</div>
								</dd>
								<dd>
									<div class="border">
										<div class="img_box">
											<img src="../images/cs_4sd.png" alt="湿度">
										</div>
										<h3>{{wd_2}}</h3>
										<p>湿度</p>
									</div>
								</dd>
							</dl>
						</div>

						<div class="Occupy">
							<div class="title">
								<h2>卫生间占用情况：</h2>
								<ul>
									<li><img src="../images/status_unoccupied.png" alt="未占用"><span>未占用</span></li>
									<li><img src="../images/status_occupied.png" alt="已占用"><span>已占用</span></li>
									<li><img src="../images/status_error.png" alt="停用"><span>停用</span></li>
									<!-- <li><img src="../images/status_stop.png" alt="紧急呼叫"><span>紧急呼叫</span></li> -->
								</ul>
							</div>
							<div class="show_box">
								<div class="row1">
									<div class="title_sm">
										<h2><img src="../images/T_man.png" alt="男士"><span>男士</span></h2>
									</div>
									<div class="zy_box">
										<ul>
											<li v-for="item in man_numbers">
												<!-- 1是空闲，2有人，3故障，4紧急呼叫 -->
												<img src="../images/zy_total.png" alt="空闲马桶" v-if="item.status==1">
												<img src="../images/zy_total_zy.png" alt="占用马桶" v-if="item.status==2">
												<img src="../images/zy_total_error.png" alt="停用马桶" v-if="item.status==3">
												<img src="../images/zy_total_ty.png" alt="紧急呼叫马桶" v-if="item.status==4">
											</li>
										</ul>
									</div>
								</div>

								<div class="row1">
									<div class="title_sm">
										<h2><img src="../images/T_woman.png" alt="女士"><span>女士</span></h2>
									</div>
									<div class="zy_box">
										<ul>
											<li v-for="item in woman_numbers">
												<!-- 1是空闲，2有人，3停用，4紧急呼叫 -->
												<img src="../images/zy_total.png" alt="空闲马桶" v-if="item.status==1">
												<img src="../images/zy_total_zy.png" alt="占用马桶" v-if="item.status==2">
												<img src="../images/zy_total_error.png" alt="停用马桶" v-if="item.status==3">
												<img src="../images/zy_total_ty.png" alt="紧急马桶" v-if="item.status==4">
											</li>
										</ul>
									</div>
								</div>

								<div class="row2">
									<div class="ts_total">
										<div class="title_sm">
											<h2><img src="../images/T_cz.png" alt="残障人士"><span>残障人士</span></h2>
										</div>
										<div class="zy_box">
											<ul>
												<li>
													<img src="../images/zy_total.png" alt="空闲马桶" v-if="disBarrier==1">
													<img src="../images/zy_total_zy.png" alt="占用马桶" v-if="disBarrier==2">
													<img src="../images/zy_total_error.png" alt="停用马桶" v-if="disBarrier==3">
													<img src="../images/zy_total_ty.png" alt="紧急马桶" v-if="disBarrier==4">
												</li>
											</ul>
										</div>
									</div>
									<div class="ts_total montherS">
										<div class="title_sm">
											<h2><img src="../images/T_my.png" alt="母婴室"><span>母婴室</span></h2>
										</div>
										<div class="zy_box">
											<ul>
												<li>
													<img src="../images/zy_my.png" alt="空闲马桶" v-if="room==1">
													<img src="../images/zy_my_zy.png" alt="占用马桶" v-if="room==2">
													<img src="../images/zy_my_error.png" alt="停用马桶" v-if="room==3">
													<img src="../images/zy_my_stop.png" alt="紧急马桶" v-if="room==4">
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="StarRating">
						<div class="title">
							<h2><img src="../images/tit_cure.png" alt="设施配备"><span>卫生间评分</span></h2>
						</div>
						<div class="star_box">
							<ul>
								<li>
									<label>设备设施：</label>
									<div class="cl_star">
										<img v-for="(star,index) in stars" :src="star.src" @click="rating(index,1)" alt="星星图片" />
										<span>{{starNum}}星</span>
									</div>
								</li>
								<li>
									<label>环境卫生：</label>
									<div class="cl_star">
										<img v-for="(star,index) in stars2" :src="star.src" @click="rating(index,2)" alt="星星图片" />
										<span>{{starNum2}}星</span>
									</div>
								</li>
								<li>
									<label>管理服务：</label>
									<div class="cl_star">
										<img v-for="(star,index) in stars3" :src="star.src" @click="rating(index,3)" alt="星星图片" />
										<span>{{starNum3}}星</span>
									</div>
								</li>
							</ul>
						</div>

						<div class="submit_button">
							<button class="btn_color" :disabled="dis_btn" @click="submitFunction">提交评论</button>
						</div>

					</div>
				</div>

			</div>
		</div>

	</body>




	<script src="../js/vue.js"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue-resource.js"></script>
	<script src="../js/swiper.min.js"></script>
	<script src="../js/base.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: false,
		});
		mui.plusReady(function() { //接受上个页面的传值!
			var current_window = plus.webview.currentWebview();
			
			
			

			var starOffImg = "../images/star_off.png";
			var starOnImg = "../images/star.png";
			var vm = new Vue({
				el: "#app",
				data: {
					totalid: current_window.toiletId,
					//这个厕所是几个星星
					all_star: 5,
					// 设备配置 是否有此设备
					bannerlist: [],
					IS_banner: false,
					img_1: false,
					img_2: false,
					img_3: false,
					img_4: false,
					img_5: false,
					img_6: false,
					img_7: false,
					img_8: false,
					//星星评分系统
					stars: [{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						},
						{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}
					],
					starNum: 0,
					stars2: [{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						},
						{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}
					],
					starNum2: 0,
					stars3: [{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						},
						{
							src: starOffImg,
							active: false
						}, {
							src: starOffImg,
							active: false
						}
					],
					starNum3: 0,
					dis_btn: true, //判断是否为警用
					getData: {}, //接口对象1
					getData_second: {}, //接口对象1_1
					gz_1: "",
					yj_1: "",
					wd_1: "",
					sd_1: "",
					getData_second2: {}, //接口对象1_2
					gz_2: "",
					yj_2: "",
					wd_2: "",
					sd_2: "",
					woman_status: {},
					woman_numbers: [], //默认个数1个位置
					man_status: {}, //男卫生间!!!!!!
					man_numbers: 1, //默认个数1个位置
					disBarrier: 0, // 第三卫生间
					room: 0, //婴儿
					userId: 0,
					show_hiden: true, //默认显示男女卫生间参数和占用情况

				},
				methods: {
					Get_ALL: function() {
						var that=this;
						this.$http.post(BASE.Host + "reportController/queryToiletCurrentInfo", {
								data : JSON.stringify({
									toiletId : this.totalid,
								})
							}, {
								emulateJSON: true
							}).then((res) => {
								
								if (res.status === 200 && parseInt(res.data.code) === 0) {
									res.data=res.data.data;//真正的数据在 res.data.data 里面
									//男士卫生间
									that.getData_second = res.data.manEnvironment;
									that.gz_1 = that.getData_second.otherInfo[1].num
									that.yj_1 = that.getData_second.otherInfo[0].num
									that.wd_1 = that.getData_second.otherInfo[2].num
									that.sd_1 = that.getData_second.otherInfo[3].num
									//女士卫生间
									that.getData_second2 = res.data.womanEnvironment;
									that.gz_2 = that.getData_second2.otherInfo[1].num
									that.yj_2 = that.getData_second2.otherInfo[0].num
									that.wd_2 = that.getData_second2.otherInfo[2].num
									that.sd_2 = that.getData_second2.otherInfo[3].num

									//卫生间占用情况
									// 女:
									that.woman_numbers = res.data.toiletUse.woman;
									var arr = []
									that.woman_numbers.state.forEach(function(item) {
										arr.push({
											status: item
										})
									})
									that.woman_numbers = arr;

									//男
									that.man_status = res.data.toiletUse.man;
									var arr = []
									that.man_status.state.forEach(function(item) {
										arr.push({
											status: item
										})
									})
									that.man_numbers = arr;

									// baby
									that.room = res.data.toiletUse.room;

									// baby
									that.disBarrier = res.data.toiletUse.disBarrier;
								} else {
									this.show_hiden = false;
								}
							})
							.catch((err) => {
								console.log(err);
							})
					},
					Getdata_one: function() {
						var that = this;
						HTTP.post(this, 'toiletInfoController/queryToiletInfoByApp', function(res) {
							function contains(arr, obj) {
								var i = arr.length;
								while (i--) {
									if (arr[i] === obj) {
										return true;
									}
								}
								return false;
							};
							that.getData = res.data;
							//轮播图:
							that.bannerlist = res.data.toiletPicture;
							setTimeout(function() {
								var mySwiper = new Swiper('.swiper-container', {
									 slidesPerView: 1, //页面显示图的张数
									 autoHeight: true, //高度随内容变化
									 loop: true,//是否循环滚动
									 centeredSlides: true,
									 autoplay: 3000,//换图间隔时间
									 autoplayDisableOnInteraction: false
									
								});
							}, 1000);
							


							// 设备配置
							that.img_1 = contains(res.data.toiletFacility, 'toiletFacilityMan');
							that.img_2 = contains(res.data.toiletFacility, 'toiletFacilityWoman');
							that.img_3 = contains(res.data.toiletFacility, 'toiletFacilityDisBarrier');
							that.img_4 = contains(res.data.toiletFacility, 'toiletFacilityRoom');
							that.img_5 = contains(res.data.toiletFacility, 'toiletFacilityWifi');
							that.img_6 = contains(res.data.toiletFacility, 'toiletFacilityElec');
							that.img_7 = contains(res.data.toiletFacility, 'toiletFacilitySell');
							that.img_8 = contains(res.data.toiletFacility, 'toiletFacilityPaper');
						}, function(res) {
							mui.toast(res);
						}, {
							toiletId: this.totalid
						})
					},
					//评分
					rating: function(index, str) {

						if (str == "1") {
							var total = this.stars.length; //星星总数
							var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

							//进入if说明页面为初始状态
							if (this.starNum == 0) {
								this.starNum = idx;
								for (var i = 0; i < idx; i++) {
									this.stars[i].src = starOnImg;
									this.stars[i].active = true;
								}
							} else {
								//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
								if (idx == this.starNum) {
									for (var i = index; i < total; i++) {
										this.stars[i].src = starOffImg;
										this.stars[i].active = false;
									}
								}
								//如果小于当前最高星级，则直接保留当前星级
								if (idx < this.starNum) {
									for (var i = idx; i < this.starNum; i++) {
										this.stars[i].src = starOffImg;
										this.stars[i].active = false;
									}
								}
								//如果大于当前星级，则直接选到该星级
								if (idx > this.starNum) {
									for (var i = 0; i < idx; i++) {
										this.stars[i].src = starOnImg;
										this.stars[i].active = true;
									}
								}

								var count = 0; //计数器-统计当前有几颗星
								for (var i = 0; i < total; i++) {
									if (this.stars[i].active) {
										count++;
									}
								}
								this.starNum = count;
							}
						}

						// 等于2的情况
						if (str == "2") {
							var total = this.stars2.length; //星星总数
							var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

							//进入if说明页面为初始状态
							if (this.starNum2 == 0) {
								this.starNum2 = idx;
								for (var i = 0; i < idx; i++) {
									this.stars2[i].src = starOnImg;
									this.stars2[i].active = true;
								}
							} else {
								//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
								if (idx == this.starNum2) {
									for (var i = index; i < total; i++) {
										this.stars2[i].src = starOffImg;
										this.stars2[i].active = false;
									}
								}
								//如果小于当前最高星级，则直接保留当前星级
								if (idx < this.starNum2) {
									for (var i = idx; i < this.starNum2; i++) {
										this.stars2[i].src = starOffImg;
										this.stars2[i].active = false;
									}
								}
								//如果大于当前星级，则直接选到该星级
								if (idx > this.starNum2) {
									for (var i = 0; i < idx; i++) {
										this.stars2[i].src = starOnImg;
										this.stars2[i].active = true;
									}
								}

								var count = 0; //计数器-统计当前有几颗星
								for (var i = 0; i < total; i++) {
									if (this.stars2[i].active) {
										count++;
									}
								}
								this.starNum2 = count;
							}
						}
						// 等于3的情况
						if (str == "3") {
							var total = this.stars3.length; //星星总数
							var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量

							//进入if说明页面为初始状态
							if (this.starNum3 == 0) {
								this.starNum3 = idx;
								for (var i = 0; i < idx; i++) {
									this.stars3[i].src = starOnImg;
									this.stars3[i].active = true;
								}
							} else {
								//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
								if (idx == this.starNum3) {
									for (var i = index; i < total; i++) {
										this.stars3[i].src = starOffImg;
										this.stars3[i].active = false;
									}
								}
								//如果小于当前最高星级，则直接保留当前星级
								if (idx < this.starNum3) {
									for (var i = idx; i < this.starNum3; i++) {
										this.stars3[i].src = starOffImg;
										this.stars3[i].active = false;
									}
								}
								//如果大于当前星级，则直接选到该星级
								if (idx > this.starNum3) {
									for (var i = 0; i < idx; i++) {
										this.stars3[i].src = starOnImg;
										this.stars3[i].active = true;
									}
								}

								var count = 0; //计数器-统计当前有几颗星
								for (var i = 0; i < total; i++) {
									if (this.stars3[i].active) {
										count++;
									}
								}
								this.starNum3 = count;
							}
						}

					}, // 结束
					submitFunction: function() {
						if (this.userId) {
							plus.nativeUI.showWaiting();
							HTTP.post(this, 'toiletCommentController/saveToiletCommentByApp', function(res) {
								mui.toast("提交成功");
								window.location.reload();
							}, function(res) {
								mui.toast(res);
							}, {
								toiletId: this.totalid,
								userId: this.userId,
								commentFacScore: this.starNum,
								commentEnvirScore: this.starNum2,
								commentManScore: this.starNum3
							})
						} else {
							mui.toast("您还没有登录")
						}
					},
					F5_onload: function() {
						location.reload();
					}
				},
				created() {
					this.Getdata_one();
					this.Get_ALL();
					// 厕位情况10秒更新
					var that = this;
					setInterval(function() {
						that.Get_ALL();
					}, 10 * 1000);
					this.userId = plus.storage.getItem('_id');
				},
				computed: {
					listenChange() {
						const {
							starNum,
							starNum2,
							starNum3
						} = this
						return {
							starNum,
							starNum2,
							starNum3
						}
					}
				},
				watch: {
					listenChange: function(val) {
						if (val.starNum == "0" || val.starNum2 == "0" || val.starNum3 == "0") {
							this.dis_btn = true
						} else {
							this.dis_btn = false
						}
					},
				}
			})



		})

		//星星的图片路径
	</script>

</html>
